<template>
  <div>
    <h1>登录账号</h1>
    <p class="p_p1">虾米 - 严选商城欢迎您</p>

    <label>
      <input
        type="text"
        placeholder="手机号码"
        v-model="user"
        class="fined"
      /><br />
      <input
        type="password"
        placeholder="密码"
        class="fined"
        v-model="password"
      /><br />
    </label>
    <van-button class="button" @click="addlogin">登录</van-button>
    <p class="p_p2">忘记密码</p>
    <a href="/registered" class="a_a">还没有注册？立即注册</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginlist: [],
      user: "",
      password: "",
    };
  },
  mounted() {},
  methods: {
    addlogin() {
      this.$APL.login(this.user, this.password).then((res) => {
        console.log(res);
        if (res.data.code == 500) {
          this.$message("登录失败");
        } else {
          this.$message("登录成功");
          localStorage.setItem("token", res.data.data.token);
          this.$router.push({ path: "/" });
        }
      });
    },
  },
};
</script>

<style lang="scss">
h1 {
  width: 100%;
  margin: 0.3rem;
  font-size: 0.5rem;
}
.p_p1 {
  margin: 0.3rem;
  color: gainsboro;
}
.fined {
  width: 250px;
  height: 40px;
  margin: 0.2rem;
  border-radius: 0.2rem;
  border: 0;
  background: rgb(247, 241, 241);
  padding: 0.1rem;
}
.button {
  width: 4rem;
  margin-left: 0.8rem;
  border-radius: 0.2rem;
}
.p_p2 {
  width: 75%;
  text-align: center;
  margin-top: 0.3rem;
}
.a_a {
  display: inline-block;
  margin-top: 0.3rem;
  width: 75%;
  text-align: center;
}
</style>